<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<title>CSS3 动画</title>
    <script src="./prefixfree.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}
		
		.box {
			width: 400px;
			margin: 100px auto;
		}
		
		.box img {
			width: 100%;
			/*使用动画*/
			animation: move 2s linear infinite;
		}
		/*
			必须先定义动画序列,动画该如何执行. 从0deg 转到-360deg
			可以拆分成不同的状态...

			从from 状态，转到  to 这个状态.
		*/
		/*定义一个动画，我们使用关键字*/
		
		@keyframes move {
			0% {
				transform: rotateZ(0deg) scale(1);
				opacity: 1;
			}
			50% {
				transform: rotateZ(-180deg) scale(2);
				opacity: 0.5;
			}
			100% {
				transform: rotateZ(-360deg) scale(1);
				opacity: 1;
			}
		}
	</style>
</head>

<body>
	<div class="box">
		<img src="./images/fengche.png">
	</div>
</body>

</html>